<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>
            Fixed sidebar
        </title>
        <meta name="description" content="">
        <meta name="author" content="ink, cookbook, recipes">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="shortcut icon" href="../img/ink-favicon.ico">
        <link rel="apple-touch-icon-precomposed" href="../img/touch-icon.57.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/touch-icon.72.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/touch-icon.114.png">
        <link rel="apple-touch-startup-image" href="../img/splash.320x460.png"
        media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="../img/splash.768x1004.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="../img/splash.1024x748.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
        <link rel="stylesheet" type="text/css" href="../css/ink.css">
        
        <!--[if IE 7 ]>
            <link rel="stylesheet" href="../css/ink-ie7.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <![endif]-->
        
        <script type="text/javascript" src="../js/holder.js"></script>
        <script type="text/javascript" src="../js/ink.min.js"></script>
        <script type="text/javascript" src="../js/ink-ui.min.js"></script>
        <script type="text/javascript" src="../js/autoload.js"></script>
        <script type="text/javascript" src="../js/html5shiv.js"></script>
        
        
        <style type="text/css">
            body {
                background: #ededed;
            }
            header {
                padding: 2em 0;
                margin-bottom: 2em;
                text-align: left;
                position: fixed;
            }
            header h1 {
                font-size: 2em;
            }
            header h1 small:before  {
                content: "|";
                margin: 0 0.5em;
                font-size: 1.6em;
            }

            header .ink-navigation {
                margin-top: 2em;
            }
            footer {
                background: #ccc;
                color: #0003;
            }
            footer p {
                padding: 0.5em 1em 0.5em 0;
                margin: 0;        
            }

            .unstyled li { 
                padding: 0.4em 0; 
                text-align: right; 
            }
            .content {
                padding-top: 2em;
            }

        </style>
    </head>
    
    <body>
        <div class="ink-grid">            
            <div class="column-group gutters">
                <div class="large-33 medium-33 small-100">

                <header>
                    <h1>
                        site name<small>smaller text</small>
                    </h1>
                    <nav class="ink-navigation">
                        <ul class="menu vertical black">
                            <li class="active"><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                            <li><a href="#">item</a></li>
                        </ul>
                    </nav>             
                </header>
                </div>
                <div class="large-66 medium-66 small-100 content">
                    <h1>heading</h1>
                    <img src="holder.js/900x600/auto/ink" alt="">
                    <p>"The unmannerly Dutch dogger!" cried Stubb. "Pull now, men, like fifty thousand line-of-battle-ship loads of red-haired devils. What d'ye say, Tashtego; are you the man to snap your spine in two-and-twenty pieces for the honour of old Gayhead? What d'ye say?"</p>

<p>"I say, pull like god-dam,"&mdash;cried the Indian.</p>

<p>Fiercely, but evenly incited by the taunts of the German, the Pequod's three boats now began ranging almost abreast; and, so disposed, momentarily neared him. In that fine, loose, chivalrous attitude of the headsman when drawing near to his prey, the three mates stood up proudly, occasionally backing the after oarsman with an exhilarating cry of, "There she slides, now! Hurrah for the white-ash breeze! Down with the Yarman! Sail over him!"</p>

<p>But so decided an original start had Derick had, that spite of all their gallantry, he would have proved the victor in this race, had not a righteous judgment descended upon him in a crab which caught the blade of his midship oarsman. While this clumsy lubber was striving to free his white-ash, and while, in consequence, Derick's boat was nigh to capsizing, and he thundering away at his men in a mighty rage;&mdash;that was a good time for Starbuck, Stubb, and Flask. With a shout, they took a mortal start forwards, and slantingly ranged up on the German's quarter. An instant more, and all four boats were diagonically in the whale's immediate wake, while stretching from them, on both sides, was the foaming swell that he made.</p>
<p>But so decided an original start had Derick had, that spite of all their gallantry, he would have proved the victor in this race, had not a righteous judgment descended upon him in a crab which caught the blade of his midship oarsman. While this clumsy lubber was striving to free his white-ash, and while, in consequence, Derick's boat was nigh to capsizing, and he thundering away at his men in a mighty rage;&mdash;that was a good time for Starbuck, Stubb, and Flask. With a shout, they took a mortal start forwards, and slantingly ranged up on the German's quarter. An instant more, and all four boats were diagonically in the whale's immediate wake, while stretching from them, on both sides, was the foaming swell that he made.</p>
<p>But so decided an original start had Derick had, that spite of all their gallantry, he would have proved the victor in this race, had not a righteous judgment descended upon him in a crab which caught the blade of his midship oarsman. While this clumsy lubber was striving to free his white-ash, and while, in consequence, Derick's boat was nigh to capsizing, and he thundering away at his men in a mighty rage;&mdash;that was a good time for Starbuck, Stubb, and Flask. With a shout, they took a mortal start forwards, and slantingly ranged up on the German's quarter. An instant more, and all four boats were diagonically in the whale's immediate wake, while stretching from them, on both sides, was the foaming swell that he made.</p>
<p>But so decided an original start had Derick had, that spite of all their gallantry, he would have proved the victor in this race, had not a righteous judgment descended upon him in a crab which caught the blade of his midship oarsman. While this clumsy lubber was striving to free his white-ash, and while, in consequence, Derick's boat was nigh to capsizing, and he thundering away at his men in a mighty rage;&mdash;that was a good time for Starbuck, Stubb, and Flask. With a shout, they took a mortal start forwards, and slantingly ranged up on the German's quarter. An instant more, and all four boats were diagonically in the whale's immediate wake, while stretching from them, on both sides, was the foaming swell that he made.</p>
                </div>
            </div>
            
        </div>
    </body>

</html>
